<template>
    <div class="common-layout">
        <el-main>
            <el-row>
                <el-select v-model="state.selected" class="m-2" placeholder="Select" 
                @change="change"
                size="large">
                    <el-option v-for="item in state.options" :key="item" :label="item" :value="item" />
                </el-select>

                数量：{{ state.data.length }}

                <copyStocksToClipboard :data="state.data" />
                <el-button @click="multi()">multi</el-button>
            </el-row>

            <el-table :data="state.data" height="900" 
            @sort-change="sortChange"
            @cell-click="cellClick"
            :cell-class-name="tableCellClassName"
            :default-sort="state.sort"
            style="width: 100%">

                <el-table-column type="expand">
                    <template #default="props">
                        <el-table :data="props.row.children" 
                        :cell-class-name="tableCellClassName"
                        :border="childBorder">
                            <el-table-column prop="date" label="date"  width="210"/>
                            <el-table-column prop="close" label="close"  width="100"/>
                            <el-table-column prop="lp" label="lp"  width="100"/>
                            <el-table-column prop="weekPct" label="week_pct"  width="100"/>
                            <el-table-column prop="disPct" label="disPct"  width="100"/>
                            <el-table-column prop="duration" label="duration" width="100"/>
                        </el-table>
                    </template>
                </el-table-column>

                <el-table-column prop="date" label="date"  width="210"/>
                <el-table-column prop="category" label="category"  width="100" sortable/>
                <el-table-column prop="stock" label="股票" width="200">
                    <template #default="scope">
                        <ToStockDetail :stock="scope.row.stock" />
                    </template> 
                </el-table-column>
                <el-table-column prop="display" label="display"  width="100">
                    <template #default="scope">
                        <ToDisplay :stock="scope.row.stock" :date="scope.row.date" />
                    </template>
                </el-table-column>
                <el-table-column prop="industry" label="industry"  width="160" sortable/>
                <el-table-column prop="weekPct" label="week_pct"  width="100" sortable/>
                <el-table-column prop="nextWeekPct" label="next_week_pct"  width="100" sortable/>
                <el-table-column prop="gb20wPct" label="gb20WPct"  width="100" sortable/>
                <el-table-column prop="gb30wPct" label="gb30WPct"  width="100" sortable/>
                <el-table-column prop="gb60wPct" label="gb60WPct"  width="100" sortable/>
                <el-table-column prop="cur60wPct" label="cur60wPct"  width="100" sortable />
                <el-table-column prop="lp" label="lp"  width="100" sortable/>
                <el-table-column prop="duration" label="duration" width="100" sortable/>
                <el-table-column prop="pre_duration" label="pre_duration" width="120" sortable/>
            </el-table>
        </el-main>
    </div>
</template>

<script setup>
import { reactive, watch, ref } from 'vue';
import ToStockDetail from '../ToStockDetail.vue';
import { getGB20WStaUpData, getGB30WStaUpData, getGB60WStaUpData } from '../../service/gbSta';
import { getLpClassName } from '../../utils/help';
import CopyStocksToClipboard from '../CopyStocksToClipboard.vue';
import ToDisplay from '../element/ToDisplay.vue';
import { openNewTableMulti } from '../../router';

const base = "GBStaUp"
const sortPropKey = base + "SortProp"
const sortOrderKey = base + "SortOrder"
const selectedKey = base + "Selected"

const props = defineProps({
    dtype: String
})

// 网址传参
const parentBorder = ref(false)
const childBorder = ref(false)
const state = reactive({
    options: [],
    selected: sessionStorage.getItem(selectedKey) || "",
    operationSelected: "",
    data: [],
    rawData: [],
    last: [],
    sort: { 
        prop: sessionStorage.getItem(sortPropKey) || '' , 
        order: sessionStorage.getItem(sortOrderKey) || '' 
    }
})

const getData = () => {
    if (props.dtype == "60w") {
        return getGB60WStaUpData(state.selected)
    } else if (props.dtype == "30w") {
        return getGB30WStaUpData(state.selected)
    } else if (props.dtype == "20w") {
        return getGB20WStaUpData(state.selected)
    } else {
        return getGB60WStaUpData(state.selected)
    }
}

const loadData = () => {
    getData().then( res => {

        state.options = res.data.date
        let sourceData = res.data.data

        state.last = res.data.last
        state.rawData = []
        state.data = []

        let countId = 0
        Object.keys(sourceData).forEach(key => {
            let tmpData = sourceData[key]
            let children = []
            let root = null
            countId += 1
            tmpData.forEach(item => {
                item.id = countId
                children.push(item)
            })

            if (root != null) {
                root['children'] = children
            } else {
                // 最新数据
                root = children[children.length-1]
                root["pre_duration"] = children[children.length-2]["duration"]
                root['children'] = children
                root['curDisPct'] = state.last[root.stock].disPct

                root['cur20wPct'] = state.last[root.stock].gb20wPct
                root['cur30wPct'] = state.last[root.stock].gb30wPct
                root['cur60wPct'] = state.last[root.stock].disPct
            }

            state.data.push(root)
        })

        state.rawData = state.data
    })
}

loadData()

const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
    let columnProperty = column.property
    let val = row[columnProperty]
    if (columnProperty == "lp") {
        return getLpClassName(val)
    }

    if (columnProperty == "duration") {
        if ([1,2].includes(val)) {
            return 'd300up-cell'
        }
    }

    if (["nextWeekPct","gb20wPct","gb30wPct","gb60wPct","curDisPct","cur60wPct"].includes(columnProperty)) {
        if (val < 0) {
            return "lt0-cell"
        }
    }

    if (columnProperty =="close") {
        return ""
    }

    if (row['disPct'] < 0) {
        return 'd300down-cell'
    }
    return ''
}

const cellClick = (row, column, cell, event) => {
    var columnProperty = column.property

    if (['industry','cur60wPct','nextWeekPct','duration'].includes(columnProperty)) {
        let val = row[columnProperty]
        if (state.operationSelected != "" && state.operationSelected == val) {
            state.operationSelected = ""
            state.data = state.rawData
        } else {
            state.operationSelected = val
            if (["curPct","cur60wPct","nextWeekPct"].includes(columnProperty)) {
                if (val >= 0) {
                    state.data = state.rawData.filter(item => item[columnProperty] >= 0)
                } else {
                    state.data = state.rawData.filter(item => item[columnProperty] < 0)
                }
            } else {
                state.data = state.rawData.filter(item => item[columnProperty] == val)
            }
        }
    }
}


const change = (value) => {
    state.selected = value
    sessionStorage.setItem(selectedKey, value)
    loadData()
}

const sortChange = (column, prop, order) => {
    sessionStorage.setItem(sortPropKey, column.prop)
    sessionStorage.setItem(sortOrderKey, column.order)
}

const getStocks = () => {
    let stocks = []
    state.data.forEach(item => {
        stocks.push(item.stock)
    })
    return stocks
}

const multi = () => {
    openNewTableMulti(getStocks())
}
</script>

<style>
</style>